// 提供一个方法，实现消息提示效果
import XtxMessage from './xtx-message.vue'
import { createVNode, render } from 'vue'
// 如下的函数需要把组件XtxMessage渲染到页面中
// createVNode
// render

// 创建一个div元素
const container = document.createElement('div')
// 给div添加了一个类 xtx-message-container
container.setAttribute('class', 'xtx-message-container')
// 把该元素添加到页面中
document.body.appendChild(container)

export default ({ type, text }) => {
  // 1. 创建一个虚拟节点
  const vnode = createVNode(XtxMessage, { type, text })
  // 2. 把虚拟节点渲染到页面中
  // vnode 表示被渲染的元素
  // container 表示DOM元素
  render(vnode, container)
  // 控制提示消息1m后消失
  setTimeout(() => {
    // 销毁提示消息
    render(null, container)
  }, 1000)
}
